<template>
  <div ref="scroll" id="wrap">
         <slot></slot>
         <div id="footer"></div>
         <div :class="{hide: status===0}" class="refresh"><span><el-icon v-if="txt=='正在加载'" size="1.2rem" style="margin-right: 1rem;" class="is-loading"><el-icon-loading /></el-icon>{{ txt }}</span></div>
  </div>
</template>

<script>
export default {
  props:{
     getDataList:{
       tyoe:Object,
       default:()=>{}
     },
     fromData:{
       tyoe:Object,
       default:()=>{}
     }
  },
    data(){
        return{
            txt:'',
            status:1,
            listtrue:false,
            from:{
              pageSize:10,
              pageNum:1,
            }
        }
    },
    components:{
    },
   watch: {
    fromData(val) {
      console.log(val)
      }
  },
    created(){
        this.list()
    },
    mounted(){
             this.$nextTick(()=>{
                   this.$refs.scroll.addEventListener('scroll',(e)=>{
                   let elVal = document.getElementById('footer');
                    if(elVal.offsetTop-this.$refs.scroll.clientHeight-this.$refs.scroll.scrollTop < 100){
                        if(this.listtrue == false){
                         this.listtrue = true
                         this.status = 0
                         this.from.pageNum +=1
                         this.txt = '正在加载'
                         this.list()
                        }

                    }
            })
           
             })
    },
    methods:{
        refresh(){

        },
        reset(){
              this.from.pageNum = 1
              this.listtrue = false
              this.list()
        },
        list(){
          console.log(this.from)
          this.from = {...this.from,...this.fromData}
          let list =  this.getDataList.post(this.from)
          console.log(list)
          list.then(res=>{
          if(res.code == '0'){
            if(res.data.length<this.from.pageSize){
                  this.status = 0
                  this.txt = '暂无数据'
                  this.listtrue = true
                  this.$emit('getdata',res.data)
            }else{
                  this.status = 0
                  this.txt = '加载成功'
                  this.$emit('getdata',res.data)
                  this.listtrue =  false
            }

          }
          })
        }
    }
}
</script>

<style lang="scss" scoped>
#wrap{
    width: 100%;
    height: 100%;
    overflow-x: hidden; 
    overflow-y: scroll; 
    
//   &.hide{
//     /* 当status为0默认时，隐藏刷新文本，通过定位到容器外面 */
//     position: absolute;
//     left: 0;
//     top: -50px;
//   }
}
// .scroll-area{
//         width: 100%;
//     /* height: 100px; */
// }
/* .wrap::-webkit-scrollbar { width: 0 !important } */
.box{
width: 50px;
height: 50px;
}
.refresh{
  width: 100%;
  height: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  color: var(--el-color-text-6)
}

</style>